
import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import { PlusOutlined, OrderedListOutlined, LoadingOutlined } from '@ant-design/icons';
import { Button, Pagination, Drawer } from "antd";
import { useNavigate, useLocation } from "react-router-dom";

import { FlowProject, qiniuGetUrl } from '../../services';
import { flowGetProjects } from '../../services/flow';
import { CategoryList } from '../../components';
import { ProjectCategoryTree, FlowProjectGrid } from './components';

export interface FlowGridProps {
    style?: CSSProperties;
}

export const FlowGrid: React.FC<FlowGridProps> = (props) => {

    const [tag, setTag] = useState<string | null>(null);

    const [identifier, setIdentifier] = useState<string | null>(null);

    const [version, setVersion] = useState<number>(0);

    return (
        <Container style={props.style}>
            <ProjectCategoryTree
                style={{
                    width: '220px',
                    minWidth: '220px',
                    borderRight: '1px solid #DEDEDE',
                    backgroundColor: '#FFFFFF',
                }}
                onProjectSelected={async (identifier, item) => {
                    setIdentifier(identifier);
                    setTag(null);
                }}
                onTagSelected={async (tag) => {
                    setIdentifier(null);
                    setTag(tag);
                }}
                version={version}
            ></ProjectCategoryTree>
            <Content>
                {
                    tag && !identifier && <FlowProjectGrid tag={tag}></FlowProjectGrid>
                }
                {
                    identifier && !tag && <></>
                }
                {
                    !tag && !identifier && <Message>
                        请选择标签！
                    </Message>
                }
            </Content>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
`;

const Content = styled.div`
    flex: 1;
    height: 100%;
    width: 100%;
`;

const Message = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
`;
